<style>
    .content {
        width: 20%;
        float: left;
    }

    .toleft {
        margin-left: 10%;
        overflow: hidden;
    }

    span {
        margin-right: 20px;
    }
</style>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" class="center">
        <div class="webmap">
            <p class="webmaptip">当前位置:</p>
            <a href="javascript:;" class="easyui-link" data-options="plain:true">统计管理</a>
            <p class="webmaptip">></p>
            <a href="javascript:;" class="easyui-link" data-options="plain:true">平台统计</a>
        </div>
        <div class="querybycon">
            <form id="query">
                <div class="queryinfo">
                    <div class="db"><span style="margin-right: 20px">时间</span><input name="startDate" id="startDate"
                                                                                     class="easyui-datetimebox">
                        -
                        <input name="endDate" id="endDate" class="easyui-datetimebox">
                    </div>
                    <div class="query">
                        <a id="querybtn" href="javascript:;" class="easyui-linkbutton  "
                           data-options="iconCls:'fa fa-search'"></a>
                    </div>
                </div>
            </form>
        </div>
        <div class="querybtn">
            <a id="exportbtn" href="javascript:;" class="easyui-linkbutton  "
               data-options="iconCls:''">导出</a>
            <div style="visibility: hidden;">aa</div>
        </div>
    </div>
    <div class="datagrid-toolbar"></div>
    <div data-options="region:'center'" class="center">
        <div class="toleft" style="margin-top: 30px;">
            <div class="content">
                <span>交易总额</span> <a href="#" title="撮合成功的融资项目的资金总额（成功放款的项目总借款金额）" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>交易总笔数</span> <a href="#" title="撮合成功的所有融资项目总笔数（成功放款项目总个数）" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总用户数</span> <a href="#" title="平台注册的用户总数" class="easyui-tooltip"><img src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总充值用户数</span> <a href="#" title="成功充值的用户总数" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总提现用户数</span> <a href="#" title="成功提现的用户总数" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
        </div>

        <div class="toleft" style="margin-top: 20px;">
            <div class="content" id="tradeAmount">
                ￥0.00
            </div>
            <div class="content" id="tradeNum">
                0笔
            </div>
            <div class="content" id="userNum">
                0人
            </div>
            <div class="content" id="rechargeNum">
                0人
            </div>
            <div class="content" id="withdrawNum">
                0人
            </div>
        </div>


        <div class="toleft" style="margin-top: 30px;">
            <div class="content">
                <span>总平台服务费</span> <a href="#" title="平台服务费总收入" class="easyui-tooltip"><img src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总垫付手续费</span> <a href="#" title="平台垫付的手续费总额" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总充值额</span> <a href="#" title="成功充值的总额" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总提现额</span> <a href="#" title="成功提现的总额" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总提现手续费</span> <a href="#" title="成功提现的总手续费" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
        </div>

        <div class="toleft" style="margin-top: 20px;">
            <div class="content" id="serviceFee">
                ￥0.00
            </div>
            <div class="content" id="commission">
                ￥0.00
            </div>
            <div class="content" id="rechargeAmount">
                ￥0.00
            </div>
            <div class="content" id="withdrawAmount">
                ￥0.00
            </div>
            <div class="content" id="withdrawFee">
                ￥0.00
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.get("/plarform/list", {startDate: "", endDate: ""}, function (msg) {
            if (msg.state == "SUCCESS") {
                getHtml(msg);
            } else {
                $.messager.show({
                    title: '操作提示',
                    msg: msg.message,
                    timeout: 2000,
                    showType: 'slide'
                });
            }
        })
    })
    //查看详情
    $("#querybtn").click(function () {
        var startDate = $('#startDate').datetimebox('getValue');
        var endDate = $('#endDate').datetimebox('getValue');
        $.get("/plarform/list", {startDate: startDate, endDate: endDate}, function (msg) {
            if (msg.state == "SUCCESS") {
                getHtml(msg);
            } else {
                $.messager.show({
                    title: '操作提示',
                    msg: msg.message,
                    timeout: 2000,
                    showType: 'slide'
                });
            }
        })
    });

    //导出excel
    $("#exportbtn").click(function () {
        var startDate = $('#startDate').datetimebox('getValue');
        var endDate = $('#endDate').datetimebox('getValue');
        window.open('/plarform/export?startDate=' + startDate + '&endDate=' + endDate);
    });
    function getHtml(msg) {
        if (msg.data != null && msg.data != undefined) {
            $("#tradeAmount").html('￥' + formatNumber(msg.data.tradeAmount, 2));
            $("#tradeNum").html(msg.data.tradeNum + " 笔");
            $("#userNum").html(msg.data.userNum + " 人");
            $("#rechargeNum").html(msg.data.rechargeNum + " 人");
            $("#withdrawNum").html(msg.data.withdrawNum + " 人");
            $("#serviceFee").html('￥' + formatNumber(msg.data.serviceFee, 2));
            $("#commission").html('￥' + formatNumber(msg.data.commission, 2));
            $("#rechargeAmount").html('￥' + formatNumber(msg.data.rechargeAmount, 2));
            $("#withdrawAmount").html('￥' + formatNumber(msg.data.withdrawAmount, 2));
            $("#withdrawFee").html('￥' + formatNumber(msg.data.withdrawFee, 2));

        } else {
            $("#tradeAmount").html('￥0.00');
            $("#tradeNum").html("0笔");
            $("#userNum").html("0人");
            $("#rechargeNum").html("0人");
            $("#withdrawNum").html("0人");
            $("#serviceFee").html('￥0.00');
            $("#commission").html('￥0.00');
            $("#rechargeAmount").html('￥0.00');
            $("#withdrawAmount").html('￥0.00');
            $("#withdrawFee").html('￥0.00');
        }
    }
    function formatNumber(value, fixed) {
        var number = Number(value);
        if (isNaN(number)) {
            return '';
        } else {
            return number.toFixed(2);
        }
    }

</script>
